import {Pressable, StyleSheet, Text, View} from "react-native";
import {FontAwesome} from "@expo/vector-icons";

export default function ({label, theme, onPress}) {
    let jsx = (
        <View style={styles.buttonContainer}>
            <Pressable style={styles.button} onPress={onPress}>
                <Text style={styles.buttonLabel}>{label}</Text>
            </Pressable>
        </View>
    )
    if (theme === "primary")
        jsx = (
            <View style={[styles.buttonContainer, {
                borderWidth: 4, borderColor: '#ffd33d', borderRadius: 18
            }]}>
                <Pressable style={[styles.button, {backgroundColor: '#fff'}]} onPress={onPress}>
                    <FontAwesome name="picture-o" size={18} color="#25292e" style={styles.buttonIcon}/>
                    <Text style={[styles.buttonLabel, {color: "#25292e"}]}>{label}</Text>
                </Pressable>
            </View>
        )
    return jsx
}
const styles = StyleSheet.create({
    buttonContainer: {
        width: 320, height: 68,
        marginHorizontal: 20, padding: 3,
    },
    button: {
        borderRadius: 10,
        width: '100%', height: '100%',
        justifyContent: 'center', alignItems: 'center',
        flexDirection: 'row',
    },
    buttonLabel: {
        color: 'white', fontSize: 16
    },
    buttonIcon: {paddingRight: 8}
})